<template>
    <z-paging ref="paging" v-model="overdueData" @query="queryList" :loading-more-enabled="false">
        <view class="container">
            <view class="credit-info">
                <view class="u-flex u-row-around">
                    <view class="head">可用账期额度（元）</view>
                    <view class="record" @click="jump2records">账单记录</view>
                </view>
                <view class="num u-flex u-row-center u-col-center">
                    <text class="money" v-show="showMoney">{{ Number(merchantCreditVo.currentAmount || 0).toFixed(2) }}</text>
                    <text class="icon money" v-show="!showMoney">&#xe64c;&#xe64c;&#xe64c;&#xe64c;&#xe64c;&#xe64c;</text>
                    <view class="eye" @click.stop="showMoney = !showMoney">
                        <view class="icon" v-show="!showMoney">&#xe7aa;</view>
                        <view class="icon" v-show="showMoney">&#xe7ab;</view>
                    </view>
                </view>
                <view class="u-flex u-row-around">
                    <view class="u-flex-1 o-border-right-white" @click="showMyBill">
                        <view class="my-bill u-text-center"><text>我的账单</text></view>
                        <view class="Last-payment-date u-text-center">
                            {{ currentBillData.lastPaidDate ? '最后还款日' + $u.$timeUtil.formatDate(currentBillData.lastPaidDate, 'MM月dd日') : '账单未生成' }}
                        </view>
                    </view>
                    <view class="u-flex-1">
                        <view class="my-limit u-text-center"><text>我的额度</text></view>
                        <view class="Last-payment-date u-text-center">
                            <text class="icon u-font-30" v-show="!showMoney">&#xe64c;&#xe64c;&#xe64c;&#xe64c;&#xe64c;&#xe64c;</text>
                            <text class="icon" v-show="showMoney">{{ Number(merchantCreditVo.creditLine || 0).toFixed(2) }}</text>
                        </view>
                    </view>
                </view>
            </view>
            <!-- 未出账单 -->
            <view class="future-bill" @click="gotoFutureBill" v-if="futureBill">
                <view class="u-flex u-row-between u-col-center">
                    <view>
                        <view class="head">未出账单</view>
                        <view class="sum-money">
                            累计金额：
                            <text class="num">{{ Number(futureBillData.repaymentTotalAmount).toFixed(2) }}</text>
                        </view>
                    </view>
                    <view class="make-bill-date">
                        出账日：{{ $u.$timeUtil.formatDate(futureBillData.billDate, 'yyyy/MM/dd') }}
                        <text class="icon icon-right"></text>
                    </view>
                </view>
            </view>
            <!-- 逾期账单 -->
            <view v-if="overdueData.length > 0" class="overdue-bill">
                <view v-for="(item,index) in overdueData" :key="'sb'+ index" class="overdue-bill-item" @click="showOverDueBill(item)">
                    <view class="u-flex u-row-between u-col-center">
                        <view>
                            <view class="head">已经逾期</view>
                            <view class="sum-money">
                                累计金额：
                                <text class="num">{{ Number(item.repaymentTotalAmount).toFixed(2) }}</text>
                            </view>
                        </view>
                        <view class="make-bill-date">
                            出账日：{{ $u.$timeUtil.formatDate(item.billDate, 'yyyy/MM/dd') }}
                            <text class="icon icon-right"></text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </z-paging>
</template>

<script lang="ts" setup>
import { useUserStore, useGlobalStore } from '@/store'
import { computed, ref } from 'vue';

const paging: any = ref(null)
const userStore = useUserStore()
const globalStore = useGlobalStore()
const merchantCreditVo = ref<any>({})
const futureBillData = ref<any>({})
/** 是否存在下期账单 */
const futureBill = ref(false)
/** 本期账单 */
const currentBillData = ref<any>({})
/** 已经逾期的账单 */
const overdueData = ref<Array<any>>([])

const showMoney = ref(false)

const $u = computed(()=>{
    return uni.$u
})

const queryList = () =>{
    uni.$u.$api.CreditApi.queryCreditInfo({ merchantId: userStore.userInfo.merchantId })
    .then((res: any) => {
        merchantCreditVo.value = res.merchantCreditVo;
        if (res.settlementBillInStatus0) {
            futureBillData.value = res.settlementBillInStatus0; // 未出账单
            console.log('有未出账单');
            futureBill.value = true;
        }
        currentBillData.value = res.settlementBillInStatus1 || {}; // 已出账单
        // 逾期账单
        paging.value?.complete(res.settlementBillInStatus2)
    })
    .catch(() => {
        paging.value?.complete(false)
    });
}

const jump2records = () => {
    let id = merchantCreditVo.value.id;
    uni.$u.$MRouter.billRecord.to({ id });
}

const showMyBill = () => {
    if (!currentBillData.value.merchantCreditId) {
        uni.$u.toast('账单未生成!');
        return;
    }
    // 暂存本期账单数据
    globalStore.data = currentBillData;

    let nextBillId = futureBillData.value.id;
    let amount = futureBillData.value.billAmount;
    let date = futureBillData.value.billDate;
    let payOff = currentBillData.value.repaymentStatus
    uni.$u.$MRouter.myBill.to({ nextBillId, amount, date, payOff });
}

const gotoFutureBill = () => {
    let para = { id: futureBillData.value.id }; // id : 账单id
    uni.$u.$MRouter.futureBill.to({ para: JSON.stringify(para) });
}

const showOverDueBill = (item: any) => {
    if (!item.id) {
        return;
    }
    // 暂存本期账单数据
    globalStore.data = item;

    let nextBillId = undefined
    let amount = undefined
    let date = undefined
    let payOff = item.repaymentStatus
    uni.$u.$MRouter.myBill.to({ nextBillId, amount, date, payOff });
}
</script>

<style scoped lang="scss">
.credit-info {
    margin: 20rpx 30rpx;
    border-radius: 10rpx;
    background-image: url(@/static/images/bg-sx.png);
    background-position: top;
    background-size: 100% 320rpx;
    background-repeat: no-repeat;
    padding: 20rpx;
    height: 320rpx;
    .head {
        font-size: 28rpx;
        color: $uni-bg-color;
        line-height: 60rpx;
    }

    .record {
        font-size: 28rpx;
        color: #996402;
        line-height: 60rpx;
    }

    .num {
        padding: 20rpx 0;
        text-align: center;
        font-size: 48rpx;
        color: $uni-bg-color-grey;
        line-height: 60rpx;
        .eye{
            margin-left: 20rpx;
        }
    }

    .my-bill > text {
        border: 1rpx solid $uni-bg-color-grey;
        border-radius: 23rpx;
        font-size: 28rpx;
        color: $uni-bg-color-grey;
        line-height: 60rpx;
        padding: 2rpx 8rpx;
    }

    .my-limit > text {
        font-size: 28rpx;
        color: $uni-bg-color-grey;
        line-height: 60rpx;
        padding: 2rpx 8rpx;
    }

    .Last-payment-date {
        font-size: 28rpx;
        color: #faf1e2;
    }
}
.future-bill,.overdue-bill {
    margin-top: 20rpx;
    border-radius: 10rpx;
    padding: 0 20rpx;
    .head {
        font-size: 28rpx;
        color: #999999;
        line-height: 60rpx;
    }

    .sum-money {
        font-size: 26rpx;
        font-weight: 600;
        color: #333333;
        line-height: 60rpx;

        .num {
            font-size: 30rpx;
            font-weight: 600;
        }
    }

    .make-bill-date {
        font-size: 28rpx;
        color: #999999;
        line-height: 60rpx;
    }
}
.overdue-bill{
    .overdue-bill-item{
        border-radius: 10rpx;
        background-color: white;
        padding: 0 30rpx;
        margin-bottom: 20rpx;
    }
    .head{
        color: red;
    }
}
.future-bill{
    margin: 0 30rpx;
    background-color: $uni-bg-color;
}
</style>
